<template>
    <div class="wrapper">
        <el-row>
            <el-button size="small" icon="el-icon-plus" @click="editNote(0)">添加</el-button>
            <el-button size="small" @click="getNoteTemplate"><i class="fa fa-refresh" aria-hidden="true"></i> 刷新
            </el-button>
        </el-row>

        <el-row class="customer_row">
            <el-table :data="templateList" stripe style="width: 100%">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column prop="templateName" label="名称"></el-table-column>
                <el-table-column prop="templateSubtypeName" label="类型"></el-table-column>
                <el-table-column prop="contentStr" label="内容" ></el-table-column>
                <el-table-column prop="createUserName" label="创建者"></el-table-column>
                <el-table-column prop="gmtCreateDate" label="创建时间" ></el-table-column>
                <el-table-column prop="gmtModifyDate" label="修改时间" ></el-table-column>

                <el-table-column fixed="right" label="操作" min-width="200" align="center"> 
                    <template scope="scope">
                        <el-button type="primary" size="mini" icon="el-icon-info" @click="noteDetail(scope.row)">详情</el-button>
                        <el-button type="primary" size="mini" icon="el-icon-edit" @click="editNote(1,scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini" icon="el-icon-delete" @click="showComfirm(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>

        <!--*****************操作框************-->
        <el-dialog :title="type == 0 ? '添加':'编辑'" :visible.sync="editDialogVisible" @close="resetForm('rulesData')">
            <el-form :model="rulesData" :rules="rules" ref="rulesData">
                <el-form-item label="名称：" :label-width="formLabelWidth" prop="templateName">
                    <el-input v-model="rulesData.templateName" style="width: 160px" auto-complete="off"></el-input>
                </el-form-item>

                <el-form-item label="类型：" :label-width="formLabelWidth" prop="typeName">
                    <el-autocomplete
                          class="inline-input"
                          @select="handleSelectType"
                          v-model="rulesData.typeName"
                          :fetch-suggestions="querySearch"
                          placeholder="请输入类型"
                    ></el-autocomplete>
                </el-form-item>

                <el-form-item label="内容：" :label-width="formLabelWidth" prop="content">
                    <el-input
                        type="textarea"
                        :autosize="{ minRows: 3}"
                        placeholder="请输入内容"
                        v-model="rulesData.content">
                    </el-input>
                </el-form-item>

            </el-form>
            <div slot="footer" class="bottom-btn">
            	<el-button type="primary" class="top_save" @click="saveInfo(type)" size="small"><i class="fa fa-save"></i> 保 存</el-button>
            	<el-button type="danger" class="top_close" @click="editDialogVisible = false" size="small"><i class="fa fa-sign-out"></i> 取 消</el-button>
            </div>
        </el-dialog>

        <!--*****************详情框************-->
        <el-dialog @close="()=>{this.detailDialogVisible = false}" title="详情" :visible.sync="detailDialogVisible">
            <el-form :model="detailNote">
                <el-form-item label="名称：" :label-width="detailNoteWidth">
                    {{detailNote.templateName}}
                </el-form-item>
                <el-form-item label="类型：" :label-width="detailNoteWidth">
                    {{detailNote.templateSubtypeName}}
                </el-form-item>
                <el-form-item label="内容：" :label-width="detailNoteWidth">
                    {{detailNote.content}}
                </el-form-item>
                <el-form-item label="创建者：" :label-width="detailNoteWidth">
                    {{detailNote.createUserName}}
                </el-form-item>
                <el-form-item label="创建时间：" :label-width="detailNoteWidth">
                    {{detailNote.gmtCreateDate}}
                </el-form-item>
                <el-form-item label="修改时间：" :label-width="detailNoteWidth">
                    {{detailNote.gmtModifyDate}}
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
    import Vue from 'vue'
    import {mapGetters} from 'vuex'
    import { Row, Col, Button ,Table,TableColumn, Dialog, Form, 
        FormItem, Select, Option, Input, Message, Autocomplete,MessageBox} from 'element-ui'
   
    Vue.use(Row);
    Vue.use(Col);
    Vue.use(Button);    
    Vue.use(Table);
    Vue.use(TableColumn);   
    Vue.use(Dialog);
    Vue.use(Form);
    Vue.use(FormItem);    
    Vue.use(Select);
    Vue.use(Option);   
    Vue.use(Input); 
    Vue.use(Autocomplete);

    export default {
        head(){
            return {
                title: "小计模板管理"
            }
        },
        data () {
            return {
                tabName: '小计模板管理',
                typeOptions: [],
                editDialogVisible: false,
                detailDialogVisible: false,
                type: 0,
                rules: {
                    templateName: [
                        { required: true, message: '请输入名称', trigger: 'blur' }
                    ],
                    typeName: [
                        { required: true, message: '请输入类型', trigger: 'blur' }
                    ],
                    content: [
                        { required: true, message: '请输入内容', trigger: 'blur' }
                    ]
                },
                rulesData: {
                    templateName: '',   //模板名称
                    typeName: '',    //类型名称
                    content: ''    //内容
                },
                detail: {
                    templateType: 1,
                    templateName: '',
                    templateSubtype: '',
                    content: '',
                    id: '',
                },
                detailNote: [],
                formLabelWidth: '80px',
                detailNoteWidth: '120px',
                templateList: [],
                templateDetail: [],
                dictType: {
                    typeName: '',
                    typeId: '200',
                    des: '小记'
                }
            }
        },
        computed: {
            ...mapGetters({
                'pageTabsList': 'getPageTabsList'
            })
        },
        methods: {
            // 获取小记模板列表
            getNoteTemplate () {
                this.$store.dispatch('getTemplateList', {'templateType': 1})
                .then((response) => {
                    let result = response.data;
                    if (result && result.code === 0) {
                        this.templateList = result.data.templateDtoList;
                        for(var i =0; i<this.templateList.length; i++) {
                            var content = this.templateList[i].content;
                            if(content.length > 10){
                                var contentStart = content.slice(0,5);
                                var contentEnd = content.slice(content.length-5 , content.length);
                                this.templateList[i].contentStr = contentStart + '...' + contentEnd;
                            }else {
                                this.templateList[i].contentStr = content;
                            }
                        }
                    }
                })
               
            },
            // 获取模板类型
            getTemplateType() {
                this.$store.dispatch('getTemplateType', {'typeId': 200})
                .then((response) => {
                    let result = response.data;
                    if (result && result.code === 0) {
                        this.typeOptions = result.data;
                    }
                })
            },

            //新增、编辑模板
            editNote(type,data) {
                this.getTemplateType();
                this.editDialogVisible = true;
                this.type = type;
                switch(type){
                    case 0: 
                        this.rulesData.templateName = '';
                        this.detail.templateSubtype = '';
                        this.rulesData.content = '';
                        this.detail.id = '';
                        this.rulesData.typeName = '';
                        break;
                    case 1:
                        this.rulesData.templateName = data.templateName;
                        this.rulesData.templateSubtype = data.templateSubtype;
                        this.rulesData.content = data.content;
                        this.rulesData.typeName = data.templateSubtypeName;
                        this.detail.id = data.id;
                    break;
                }
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
                this.editDialogVisible = false;
            },

            //模板详情
            noteDetail(data) {
                this.detailDialogVisible = true;
                this.detailNote = data;
            },

            //保存模板信息
            saveInfo(type){
                if(!this.rulesData.templateName){
                    Message.warning({
                        message: '请输入模板名称'
                    });
                    return;
                }else if(!this.rulesData.typeName){
                    Message.warning({
                        message: '请选择模板类型'
                    });
                    return;
                }else if(!this.rulesData.content){
                    Message.warning({
                        message: '请输入模板内容'
                    });
                    return;
                }
                this.editDialogVisible = false;
                this.dictType.typeName = this.rulesData.typeName;
                this.detail.templateName = this.rulesData.templateName;
                this.detail.content = this.rulesData.content;
				
                this.$store.dispatch('addDictType',  this.dictType)
                    .then((response) => {
                        let result = response.data;
                        if (result.code === 0) {
                        this.detail.templateSubtype = result.data;
                            switch(type) {
                                case 0:
                                    delete this.detail['id'];
                                    this.$store.dispatch('addTemplate', this.detail)
                                        .then((response) => {
                                            let result = response.data;
                                            if (result.code === 0) {
                                                Message.success({
                                                    message: '保存成功'
                                                });
                                                this.getNoteTemplate();
                                            }
                                        });
                                    break;
                                case 1:
                                    this.$store.dispatch('updateTemplate', this.detail)
                                        .then((response) => {
                                            let result = response.data;
                                            if (result.code === 0) {
                                                Message.success({
                                                    message: '修改成功'
                                                });
                                                this.getNoteTemplate();
                                            }
                                        });
                                    break;
                            }
                        }
                    })
            },
            showComfirm(row) {
                MessageBox.confirm('确认删除模板：' + row.templateName + '吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.deleteTemplate(row.id);
                })
                    .catch(() => {
                        Message.info({
                            message: '已取消删除'
                        });
                    });
            },
            deleteTemplate(id) {
                this.$store.dispatch('deleteTemplate', {'id': id})
                .then((response) => {
                    let result = response.data;
                    if (result.code === 0) {
                        Message.success({
                            message: '删除成功'
                        });
                        this.getNoteTemplate();
                    }
                })
            },
            
            //搜索类型
            querySearch(queryString, cb) {
                var typeOptions = this.typeOptions;
                var results = queryString ? typeOptions.filter(this.createFilter(queryString)) : typeOptions;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (typeOption) => {
                  return (typeOption.value.indexOf(queryString.toLowerCase()) === 0);
                };
            },
            handleSelectType(val){
                this.rulesData.typeName = val.value;
            }
        },
        created(){
            this.getNoteTemplate();
            //pageTab
            if(process.BROWSER_BUILD) {
                if(this.pageTabsList[this.pageTabsList.length-1].name == 'CRM') {
                    let arr = this.pageTabsList;
                    arr[arr.length-1].name = this.tabName;
                    this.$store.commit('PAGETABSLIST',{data:arr})
                }
            }
        }
    }

</script>

<style scoped lang="scss">
    .customer_row {
        margin-top: 20px;
        background-color: #ff0000;
    }
    .bottom-btn{
        width:100%;
        display:table;
        text-align:center;
    }
</style>